<template>
    <div class="itemIndex">
        <div class="bannerItemImg">
            <van-swipe :autoplay="5000" indicator-color="white">
                <van-swipe-item v-for="(item,index) in shopItemList.images"><img v-lazy="item" alt=""></van-swipe-item>
            </van-swipe>
        </div>
        <div class="shopMessage">
            <p>{{shopItemList.title}}</p>
            <p class="price">¥{{shopItemList.price}}</p>
            <p><span>快递：{{shopItemList.freight}}元</span><span>月销量{{shopItemList.sales}}件</span></p>
        </div>
        <div class="shopPage" v-if="pageTitle.length>0">
            <p style="color: #7b7f82;font-size: 0.28rem;">商品评价（{{pageTitle.length}}）</p>
            <div class="userTitle" v-for="(item,index) in pageTitle">
                <dl>
                    <dt>
                        <van-image
                                round
                                width="0.5rem"
                                height="0.5rem"
                                :src="item.head"
                        />
                    </dt>
                    <dd>
                        {{item.nickname}}
                    </dd>
                </dl>
                <p class="pageMessage">{{item.content}}</p>
                <p>{{item.times}}</p>
            </div>
            <div class="lookMore">
                <button @click="lookMore()">查看更多评论</button>
            </div>
        </div>
        <div class="shopComment" v-if="pageTitle.length < 1">
            <p>{{title}}</p>
        </div>
        <div class="markBox" v-show="bool">
            <div class="markTop" @click="closeOver()">

            </div>
            <transition>
                <div class="infoPage">
                    <dl>
                        <dt>
                            <img v-lazy="imgPage" alt="">
                        </dt>
                        <dd>
                            <p>{{shopItemList.title}}</p>
                            <p class="price"><span>¥{{shopItemList.price}}</span><span>商品编号{{shopItemList.gid}}</span></p>
                        </dd>
                    </dl>
                    <div class="pageShopGoods" v-for="(items,index) in goods">
                        <p>{{items.title}}</p>
                        <span v-for="(item,index) in items.values" @click="SelectionStyle(items.attrid,item.vid)" :class="{cor:item.show}">{{item.value}}</span>
                    </div>
                    <div class="buyNum">
                        <span>购买数量</span>
                        <div class="Counter">
                            <button @click="reduceCounter()">
                                -
                            </button>
                            <input type="text" min="1" v-model="buyCounter">
                            <button @click="addCounter()">
                                +
                            </button>
                        </div>
                    </div>
                    <button class="sureCar" @click="putInCar()">确定</button>
                    <div class="closeIcon">
                        <span @click="closeOver()"><van-icon name="cross" /></span>
                        <span class="line"></span>
                        <span class="circle"></span>
                    </div>
                </div>
            </transition>
            <transition>
                <img :src="imgPage" alt="" class="toCar" v-show="sToCar">
            </transition>
        </div>
        <footer>
            <button @click="collection()">收藏</button>
            <button @click="openOver()">加入购物车</button>
        </footer>
    </div>
</template>
<script>
    import {getUsersGood,getUserComment,getGoodInfo,putcollection} from "../../api/list/list";

    export default {
        name:"ItemIndex",
        data(){
            return{
                shopItemList:[],
                gid:'',
                pageTitle:[],
                title:'',
                bool:false,
                imgPage:'',
                goods:[],
                buyCounter:1,
                sToCar:false,
                totalId:'',
                carlist:[]
            }
        },
        created() {
            this.gid = this.$route.query.gid
            const params = {
                gid:this.$route.query.gid,
                type:'details',
                token:'1ec949a15fb709370f'
            }
            getUsersGood(params).then((res)=>{
                let data = res.data.data
                this.shopItemList = data
                this.imgPage = data.images[0]
            })
            const testPage = {
                gid:Number(this.$route.query.gid),
                token:'1ec949a15fb709370f',
                page:1
            }
            console.log(testPage)
            getUserComment(testPage).then((res)=>{
                if(res.data.data == '没有数据'){
                    this.pageTitle = []
                    this.title = '没有相关评论！！！'
                }else{
                    this.pageTitle = res.data.data
                }
            })

            const pageInfo = {
                gid : Number(this.$route.query.gid),
                type : 'spec',
                token:'1ec949a15fb709370f'
            }
            getGoodInfo(pageInfo).then((res)=>{
                let data = res.data.data
                for(let i=0;i<data.length;i++){
                    for(let j=0;j<data[i].values.length;j++){
                       data[i].values[j].show = false
                    }
                }
                this.goods = res.data.data
            })
        },
        methods:{
            lookMore(){
                this.$router.replace({path:'/commodity/comment',query:{gid:this.gid}})
            },
            openOver(){
                this.bool = true
            },
            closeOver(){
                this.bool = false
            },
            putInCar(){
                this.sToCar = true
                setTimeout(()=>{
                    this.sToCar = false
                },2500)
                this.carlist = []
                for(let i=0;i<this.goods.length;i++){
                    for(let j=0;j<this.goods[i].values.length;j++){
                        if(this.goods[i].values[j].show == true){
                            this.carlist.push(this.goods[i].values[j])
                        }
                    }
                }
                console.log(this.carlist)


            },
            SelectionStyle(fatherId,childId){
                if(this.totalId == ""){
                    const  fathers = this.goods.filter((item)=>{
                        if(item.attrid == fatherId) {
                            return item.values;
                        }
                    });
                    fathers[0].values.forEach((items)=>{
                        if(items.vid == childId){
                            items.show = true;
                        }
                    });
                    this.totalId = fatherId;
                }else if(this.totalId == fatherId){
                    const  fathers = this.goods.filter((item)=>{
                        if(item.attrid == fatherId) {
                            return item.values;
                        }
                    });
                    //如果点击的已经选中的话 再次点击取消选中
                    fathers[0].values.forEach((items)=>{
                        if(items.vid == childId){
                            if(items.show){
                                items.show = false;
                            }else{
                                items.show = true;
                            }
                        }
                    })
                }else if(this.totalId != fatherId){
                    const  fathers = this.goods.filter((item)=>{
                        if(item.attrid == fatherId) {
                            console.log(item.values)
                            return item.values;
                        }
                    });
                    fathers[0].values.forEach((items)=>{
                        if(items.vid == childId){
                            items.show = true;
                        }
                    });
                    this.totalId = fatherId;
                }

            },
            reduceCounter(){
                if(this.buyCounter > 1){
                    this.buyCounter--
                }
            },
            addCounter(){
                this.buyCounter++
            },
            collection(){
                const params = {
                    uid : JSON.parse(localStorage.getItem('userData')).uid,
                    gid : this.gid,
                    token:'1ec949a15fb709370f'
                }
                putcollection(params).then((res)=>{
                    if(res.data.code == 200){
                        this.$toast.success('收藏成功');
                    }else if(res.data.code == 302){
                        this.$toast.fail('您已经收藏');
                    }else{
                        this.$toast.fail('收藏失败');
                    }
                })
            },

        }
    }
</script>
<style lang="less" scoped>
    .itemIndex{
        width: 100%;
        overflow: auto;
        height: 100%;
        padding-bottom:2rem;
        box-sizing: border-box;
        .bannerItemImg{
            width: 100%;
            img{
                width: 100%;
                height: auto;
                display: block;
            }
        }
        .shopMessage{
            width: 100%;
            padding: 0 0.2rem;
            box-sizing: border-box;
            background: white;
            .price{
                line-height: 0.8rem;
                color: #f93036;
                font-size: 0.28rem;
            }
            p:last-child{
                display: flex;
                justify-content: space-between;
                color: #969696;
                line-height: 0.8rem;
                font-size: 0.2rem;
            }
        }
        .shopPage{
            width: 100%;
            background: white;
            margin-top: 0.6rem;
            padding: 0.2rem 0.6rem 0.2rem 0.2rem;
            box-sizing: border-box;
            .lookMore{
                text-align: center;
                margin-top: 0.2rem;
                button{
                    width: 2rem;
                    border: 1px solid #d50a17;
                    background: white;
                }
            }
            .userTitle{
                margin-top: 0.1rem;
                dl{
                    width: 100%;
                    display: flex;
                    dt{
                        width: 0.5rem;
                    }
                    dd{
                        text-align: left;
                        padding-left: 0.1rem;
                        box-sizing: border-box;
                        line-height: 0.5rem;
                    }
                }
                .pageMessage{
                    font-weight: 700;
                }
                p:last-child{
                    color: #7b7f82;
                }
            }

        }
        .shopComment{
             background: white;
             text-align: center;
            margin-top: 0.6rem;
            font-size: 0.32rem;
            padding: 0.2rem 0;
            box-sizing: border-box;
         }
        .Active{
            border-bottom: 1px solid yellow;
        }
        .markBox{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0;
            left: 0;
            background: rgba(0,0,0,.5);
            z-index: 999;
            .markTop{
                flex: 1;
            }
            .infoPage{
                width: 100%;
                height: 6rem;
                background: white;
                animation: openTop 1s;
                position: relative;
                .closeIcon{
                    width: 0.3rem;
                    height: 1rem;
                    position: absolute;
                    top: -0.8rem;
                    right: 0.2rem;
                    z-index: 999;
                    display: flex;
                    flex-direction: column;
                    span:first-child{
                        background: white;
                        width: 0.3rem;
                        height: 0.3rem;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 0.15rem;
                    }
                    span:nth-child(2){
                        width: 0;
                        height: 0.6rem;
                        border: 1px solid #ffffff;
                        margin-left: 0.13rem;
                    }
                    span:last-child{
                        background: black;
                        width: 0.1rem;
                        height: 0.1rem;
                        border-radius: 0.05rem;
                        margin-left: 0.1rem;
                    }
                }
                dl{
                    width: 100%;
                    display: flex;
                    padding-top: 0.1rem;
                    box-sizing: border-box;
                    border-bottom: 1px solid #efefef;
                    dt{
                        width: 1.3rem;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        img{
                            width: 1rem;
                            height: 1rem;
                            display: block;
                        }
                    }

                    dd{
                        flex: 1;
                        padding-right: 0.2rem;
                        box-sizing: border-box;
                        .price{
                            color: #d50a17;
                            display: flex;
                            justify-content: space-between;
                            span:last-child{
                                color: #888888;
                            }
                        }
                    }
                }
                .pageShopGoods{
                    width: 100%;
                    padding: 0 0.1rem;
                    box-sizing: border-box;
                    margin-top: 0.1rem;
                    p{
                        font-size: 0.28rem;
                        line-height: 0.5rem;
                    }
                    span{
                        background: #efefef;
                        padding: 0.1rem;
                        box-sizing: border-box;
                        font-size: 0.28rem;
                        margin-left: 0.1rem;
                        border-radius: 0.1rem;
                    }
                    .cor{
                        background: #FDA208;
                        color: white;
                    }
                }
                .buyNum{
                    width: 100%;
                    padding: 0 0.1rem;
                    box-sizing: border-box;
                    margin-top: 0.2rem;
                    display: flex;
                    span{
                        flex: 1;
                        font-size: 0.28rem;
                    }
                    .Counter{
                        width: 2rem;
                        height: 0.6rem;
                        border: 1px solid black;
                        border-radius: 0.1rem;
                        display: flex;
                        button{
                            width: 0.5rem;
                            font-size: 0.36rem;
                        }
                        input{
                            width: 1rem;
                            text-align: center;
                            height: 0.4rem;
                            margin-top: 0.1rem;
                            border:none;
                            border-right: 1px solid black;
                            border-left: 1px solid black;
                        }
                    }
                }
                .sureCar{
                    width: 100%;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    color: white;
                    background: #d50a17;
                    height: 0.8rem;
                    border: none;

                }

            }
        }
        .toCar{
            width: 0.4rem;
            height: 0.4rem;
            position: fixed;
            z-index: 999;
            animation: toCar 3s;
        }
        footer{
            width: 100%;
            height: 1rem;
            display: flex;
            position: fixed;
            bottom: 0;
            left: 0;
            button{
                flex: 1;
                border: none;
                color: white;
                font-size: 0.32rem;
            }
            button:first-child{
                background: #FCB40A;
            }
            button:last-child{
                background: #CC0004;
            }
        }
    }
    @keyframes openTop{
        from{
            transform: translateY(100%)
        }
        to{
            transform: translateY(0%);
        }
    }

    @keyframes toCar {
        0%{
            transform: rotate(0deg) scale(1.2);
            top: 4.5rem;
            left: 0.3rem;
        }
        100%{
            transform: rotate(10000deg)scale(0.6);
            top:0.4rem;
            left: 5.5rem;
        }
    }
</style>